<template>
  <div class="content">
    <div class="top flex-column">
      <div class="tabs flex-row">
        <div class="tab active">
          修改密码
        </div>
      </div>
    </div>
    <div class="form-login">
      <div class="form-content">
        <van-field v-model="editForm.password" label="输入密码" placeholder="请输入您的密码"
          :type="isShowPasd ? 'password' : 'text'">
          <template #button>
            <div class="eye flex-row" style="justify-content: center;align-items: center;"
              @click="isShowPasd = !isShowPasd">
              <van-icon :name="isShowPasd ? 'closed-eye' : 'eye-o'" size="18" />
            </div>
          </template>
        </van-field>
      </div>
      <div class="form-content">
        <van-field v-model="editForm.confirmpassword" label="确认密码" placeholder="请再次输入您的密码"
          :type="isRestShowPasd ? 'password' : 'text'">
          <template #button>
            <div class="eye flex-row" style="justify-content: center;align-items: center;"
              @click="isRestShowPasd = !isRestShowPasd">
              <van-icon :name="isRestShowPasd ? 'closed-eye' : 'eye-o'" size="18" />
            </div>
          </template>
        </van-field>
      </div>
    </div>
    <div class="foot">
      <div class="log_btn" @click="editPassword()">确定</div>
    </div>
    <!-- 修改成功遮罩层 -->
    <van-overlay :show="showSuccess">
      <div class="wrapper" @click="showSuccess = false">
        <div class="block">
          <div class="icons"><van-icon size="30" color="#fff" name="passed" /></div>
          <div class="message">修改成功</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { showToast } from "vant";
import { useRoute } from "vue-router";
import { forgetPassword } from "@/api/loginApi";
import router from "@/router";


// 获取当前密码状态
const route = useRoute();
const codeInfo = ref({})
const getPsdStatus = () => {
  codeInfo.value = route.query
}
getPsdStatus()
const editForm = ref({
  password: "",
  confirmpassword: "",
});
const isShowPasd = ref(true)
const isRestShowPasd = ref(true)
const showSuccess = ref(false)
// 修改密码
const editPassword = async() => {
  if(editForm.value.password === editForm.value.confirmpassword) {
    await forgetPassword({...codeInfo.value,...editForm.value,scene:'RESET_PW'})
    showSuccess.value = true;
    setTimeout(() => {
      router.push('/user')
    }, 2000);
  }else {
    showToast("两次密码不一致");
  }

}
</script>

<style lang="less" scoped>
@import "./index.less";

.foot {
  margin-top: 100px;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 96px;
    background: rgba(0, 0, 0, .8);
    padding: 16px;
    border-radius: 8px;
    .icons {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }

    .message {
      font-size: 16px;
      color: #FFFFFF;
    }

  }
}

:deep(.van-overlay) {
  background: rgba(0, 0, 0, 0.4);
}
</style>